{% extends "base.html" %}

{% block header %}
<style>
  h1 {
    text-align: center;
  }
  h2 {
    text-align: center;
  }
</style>
{% endblock %}


{% block content %}
<h1>{{course.short_name}}</h1>
<h2>{{course.long_name}}</h2>
Heres a list of your friends taking this class:
<li> Jimmy Joe
<li> Bobby Bill
<div id='posts'>
  {% for post in posts %}
  <div class='post' id='{{post.course}}/{{post.name}}'>
    <div class='post-top'>
      <div class='post-class'><a href="/a/{{post.course}}">{{post.course}}</a>,</div>
      <div class='post-name'><a href="/a/{{post.course}}/{{post.name}}">{{post.name}}</a></div>
      <div class='post-due'>
        {{post.due}}
      </div>
    </div>
    <div class='post-content'>
      <div class='post-done'><a href='javascript:void(0);'>Not Done</a></div>
      <div class='post-hide'><a href='javascript:void(0);'>Hide</a></div>
      <div class='post-discussion'> 
        <div class="fb-comments" data-href="http://planner.sorestian.net/a/{{post.course}}/{{post.name}}" data-num-posts="2" data-width="600"></div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endblock %}